<template>
  <div id="cart">
    <!-- 顶部 -->
    <cart-nav-bar class="cartnavbar">
      <div slot="nav-center">购物车({{length}})</div>
    </cart-nav-bar>
    <!-- 商品展示 -->
    <cart-list></cart-list>
    <!-- 底部汇总 -->
    <cart-buttom-bar></cart-buttom-bar>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import CartNavBar from '../../components/common/navbar/NavBar.vue';
import CartList from './childComps/CartList.vue';
import CartButtomBar from './childComps/CartBottomBar.vue'

import {mapGetters} from 'vuex';
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    CartNavBar,
    CartList,
    CartButtomBar
  },
  props: {},
  data() {
  //这里存放数据
  return {
  
  };
  },
  //计算属性 类似于data概念
  computed: {
    //两种用法获取vuex中的getters中的方法
    //a:方法
    // ...mapGetters([
    //   'cartLength',
    //   'cartList'
    // ])
    //b:方法
    ...mapGetters({
      length: 'cartLength',
      list: 'cartList'
    })
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
  
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
  
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
  
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
  }
</script>
<style scoped>
#cart{
  height: 100vh;
  padding-top: 2.75rem;
}
.cartnavbar{
  background-color: var(--color-tint);
  color: var(--color-background);
/* font-weight: 700;
  */
}
</style>